<template>
  <KView class="shopping-cart">
    <KView class="shopping-cart-header-div">
      <sys-header :user="user" title="购物车"></sys-header>
    </KView>
    <KView class="shopping-cart-line"></KView>

    <template v-if="isShow">
      <template v-if="cartList.length>0">
        <KView class="shopping-cart-content">
          <KView>
            <template v-for="cart in cartList">
              <cart-item v-if="cart.goodsObj[1]" :key="`type1_${cart.id}`" :cart="cart" :shop-cart="shopCart" :type="1" @shop-click="toShopMall">
              </cart-item>
              <cart-item v-if="cart.goodsObj[2]" :key="`type2_${cart.id}`" :cart="cart" :shop-cart="shopCart" :type="2" @shop-click="toShopMall">
              </cart-item>
            </template>
          </KView>
          <KView class="shopping-cart-content-footer"></KView>
        </KView>
        <KView class="shopping-cart-footer">
          <cart-footer class="shopping-cart-footer-content" :shop-cart="shopCart" @cart-balance="cartBalance">
          </cart-footer>
        </KView>
      </template>
      <KView v-else class="shopping-cart-nodata flex-central">
        <KView>没有宝贝，快去收藏加入吧~</KView>
      </KView>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysHeader from 'views/systemIndex/header';
  import CartItem from './cartItem';
  import CartFooter from './cartFooter';

  import ShoppingCartApi from 'services/shoppingCartApi';
  import GoodsPaymentApi from 'services/goodsPaymentApi';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],
    computed: {
      cartList() {
        let shopCart = this.shopCart;
        if (shopCart === null) {
          return [];
        }
        return shopCart.cartList;
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        isShow: false,
        shopCart: null
      };
    },

    created() {
      this.initData();
    },

    methods: {
      initData() {
        SystemUtil.showLoading();
        this.setShopCart().then(() => {
          this.isShow = true;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      resetData() {
        this.initData();
      },

      setShopCart() {
        return ShoppingCartApi.getShopCartData(this.location.lnglat).then(shopCart => {
          this.shopCart = shopCart;
          return shopCart;
        });
      },

      toShopMall(cart) {
        let shopData = cart.getShopParam();
        if (this.isMiniprogram) {
          let data = SystemUtil.formatFormParam(shopData);
          window.open(`/shopMall?${data}`);
        } else {
          this.$router.push({
            path: '/shopMall',
            query: shopData
          });
        }
      },

      cartBalance() {
        let shopCart = this.shopCart;
        let data = shopCart.getGoodsList();
        if (data.goodsCartList.length !== 1) {
          this.$api.showToast({
            title: '一次只能结算一家商铺的商品',
            icon: 'none'
          });
          return;
        }

        SystemUtil.showLoading('');
        GoodsPaymentApi.payGoodsList(data.goodsList, this.location.lnglat, 'GWC').then(orderId => {
          SystemUtil.hideLoading();
          this.setShopCart();
          let url = `/paymentGoods/${orderId}?type=shoppingCart`;
          if (this.isMiniprogram) {
            window.open(url);
          }
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      }
    },

    components: {
      SysHeader,
      CartItem,
      CartFooter
    }
  };

</script>

<style lang="scss">
  .shopping-cart {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .shopping-cart-header-div {
      height: formatPx(70);
      padding: formatPx(40) formatPx(30) formatPx(45);
    }

    .shopping-cart-line {
      height: 1px;
      background: #DADADA;
    }

    .shopping-cart-content {
      flex: 1;
      margin-top: formatPx(30);
      padding: formatPx(10) formatPx(30);
      overflow: auto;

      .shop-cart-item {
        margin-bottom: formatPx(35);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .shopping-cart-content-footer {
        height: formatPx(30);
      }
    }

    .shopping-cart-nodata {
      flex: 1;
      color: #999999;
    }

    .shopping-cart-footer {
      height: calc(#{formatPx(110)} - 1px);
      border-top: 1px solid #DADADA;
      padding: formatPx(30) formatPx(30) 0;

      .shopping-cart-footer-content {
        height: formatPx(80);
      }
    }
  }

</style>
